<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
    <style>
        *{margin: 0;padding:0;box-sizing: border-box}
        body{
            background: #efefef;
        }
        .container{
            width: 1000px;
            margin: 40px auto;
            background: #fff;
            overflow: hidden;
            padding: 15px;
        }
        hr{
            margin: 20px 0;
        }
        .item img{
            width: 100%;
        }
        .item{
            width: 20%;
            float:left;
            padding: 0 15px 10px;
        }

        .item p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        .goods-list{
            margin: 0 -15px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>商品列表</h2>
        <hr>
        <div class="goods-list">
            <!-- <div class="item">
                div 
                <img src="http://cdn.xiaohigh.com/images/goods/53a5e2d24dabf32d.jpg" alt="">
                <p>一加 OnePlus 9 Pro 5G旗舰2K+120Hz 柔性屏12GB+256GB 绿洲 骁龙888 65W快充 哈苏专业模式 超广角拍照手机</p>
            </div> -->
            
        </div>
    </div>

    <script>
        async function main(){
            let list = document.querySelector(".goods-list")
            let {data} = await axios.get('http://api.xiaohigh.com/goods');
            //遍历数组
            data.forEach(item => {
                //创建结构
                let div = document.createElement('div');
                div.className = 'item';
                //img
                let img = document.createElement('img');
                img.src = 'http://cdn.xiaohigh.com' + item.img;
                //p
                let p = document.createElement('p');
                p.innerHTML = item.title;
                //组装
                div.appendChild(img)
                div.appendChild(p)
                list.appendChild(div);
            })
        }
        main();
    </script>
</body>
</html>